<template>
  <div class="wel-container">
    <div class="wel-title">
      系统首页
    </div>
    <div class="line"></div>
    <div class="total">
      <div class="item">
        <h4>订单总数</h4>
        <div class="count">
          <i class="el-icon-tickets"></i>
          <strong>{{shopData.orderCount}}</strong>
        </div>
      </div>
      <div class="item">
        <h4>总销售额</h4>
        <div class="count">
          <i class="el-icon-money"></i>
          <strong>{{shopData.SalesVal}}</strong>
        </div>
      </div>
      <div class="item">
        <h4>成交量</h4>
        <div class="count">
          <i class="el-icon-user"></i>
          <strong>{{shopData.SalesCount}}</strong>
        </div>
      </div>
      <div class="item">
        <h4>用户量</h4>
        <div class="count">
          <i class="el-icon-view"></i>
          <strong>{{shopData.wxuserCount}}</strong>
        </div>
      </div>
    </div>
    <div class="other">
      <h3>代办事项</h3>
      <div class="other-box">
        <div class="small">
          <strong>{{shopData.waitPayCount}}</strong><span>待付款</span>
        </div>
        <div class="small"><strong>{{shopData.waitSendCount}}</strong><span>待发货</span></div>
        <div class="small"><strong>{{shopData.waitConfirmCount}}</strong><span>待收货</span></div>
        <div class="small"><strong>0</strong><span>待评价</span></div>
        <div class="small"><strong class="alert">0</strong><span>退款/售后</span></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WelCom',
  data() {
    return {
      shopData: {}
    }
  },
  methods: {
    // 商城数据初始化
    async getShopTotalInit() {
      const { data: rel } = await this.$http.get('/shopTotal')
      if (rel.code === 20000) {
        this.shopData = rel.data
      }
    }
  },
  created() {
    this.getShopTotalInit()
  }
}
</script>

<style scoped>
.wel-title {
  border-left: 5px solid #6a9d03;
  padding-left: 10px;
  color: #999;
}
.line {
  height: 13px;
  width: 98%;
  border-bottom: 2px solid #f1f1f1;
}
.total {
  display: flex;
  margin-top: 20px;
}
.total .item {
  height: 200px;
  width: 300px;
  background-color: pink;
  box-sizing: border-box;
  padding: 30px;
  margin-right: 50px;
  color: #fff;
  border-radius: 3px;
  box-shadow: 0px 1px 2px #999;
}
.item h4 {
  padding: 0 !important;
  margin: 0 !important;
}
.item i {
  line-height: 1.5;
}
.item .count {
  display: flex;
  justify-content: space-between;
  font-size: 30px;
  padding-top: 50px;
}
.item:first-child {
  background-color: #6a9d03;
}
.item:nth-child(2) {
  background-color: #008cf2;
}
.item:nth-child(3) {
  background-color: #fe677f;
}
.item:nth-child(4) {
  background-color: #feb351;
}
.other {
  border: 2px solid #f1f1f1;
  margin-top: 50px;
  padding: 0 30px 30px;
  color: #999;
}
.other-box {
  display: flex;
}
.other-box .small {
  width: 200px;
  height: 200px;
  border: 2px solid #f1f1f1;
  margin-right: 50px;
}
.other-box .small {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  line-height: 2;
}
.other-box strong {
  font-size: 30px;
  color: #6a9d03;
}
.small .alert {
  color: red;
}
</style>
